<template>
	<!-- 2.显示计算属性 -->
<!-- 	<p>msg的初始值：{{msg}}</p>
	<button @click="updatemsg">点击修改msg</button>
	<p>翻转msg后remsg的值：{{remsg}}</p> -->
	
	<h3>计算购物车的商品的总价格</h3>
	<p>雪糕的单价：{{foot.price}}元</p>
	输入雪糕的数量：<input type="text" v-model="num" />
	{{num}}支
	<p>雪糕的总价：{{totalprice}}元</p>
	<button @click="updatemsg">点击修改foot.price</button>
</template>

<script setup>
	import {computed,ref,reactive} from 'vue'
	//演示计算属性
	//计算属性通过computed()函数定义，该函数的参数为一个回调函数，
	//开发者需要在回调函数中实现计算功能，并在计算完成后返回计算后的数据，
	//1.定义计算属性
	const num=ref(1)
	const foot=reactive({
		name:'雪糕',price:3
	})
	const totalp=ref(0)
	const totalprice=computed(()=>{
		//计算雪糕的价值
	   totalp.value=foot.price * num.value
	   return totalp
	})
	const updatemsg=()=>{
		//更新
		foot.price=2
		
	}
</script>

<style>
</style>